<!--
 * @Author: wupeiwen <javapeiwen2010@gmail.com>
 * @Date: 2022-05-25 13:49:14
 * @LastEditors: wupeiwen <javapeiwen2010@gmail.com>
 * @LastEditTime: 2023-10-23 19:32:24
 * @FilePath: /tea-garden-web/src/pages/overview/subject-pick.vue
 * @Description: 专题-采摘预测
-->
<template>
  <div class="subject-pick">
    <div class="content">
      <i
        class="icon-button-back"
        @click="$router.push({ name: 'baseOverview' })"
      />
      <span class="module-name">采摘预测</span>
      <div class="subject-content">
        <el-row class="title-area">
          <el-col :span="12" class="title">采摘时间预测</el-col>
        </el-row>
        <section class="info-box-1" v-if="!loading.pickDate">
          <section class="date1">
            <span>{{ formatDate1(pickDate, 'start_time') }}</span>
            <span>{{ formatDate1(pickDate, 'end_time') }}</span>
          </section>
          <section class="date2">
            <span>{{ formatDate2(pickDate, 'zh_start_time') }}</span>
            <span>{{ formatDate2(pickDate, 'zh_end_time') }}</span>
          </section>
        </section>
        <section class="info-box-1" v-else v-loading="loading.pickDate" />
        <el-row class="title-area">
          <el-col :span="12" class="title">天气预测</el-col>
        </el-row>
        <section class="info-box-2" v-if="!loading.todayWeather">
          <section class="single-weather" v-for="(item, index) in todayWeather" :key="index">
            <section class="week-day">{{ formatWeek(item, 'week') }}</section>
            <section class="date">{{ formatDate3(item, 'date') }}</section>
            <!-- 气象图标 -->
            <section class="weather-icon">
              <span class="weather-b" :class="[`${item.wea_img}`]"></span>
            </section>
            <section class="max-temperature">{{ item.tem_day }}</section>
            <section class="min-temperature">{{ item.tem_night }}</section>
          </section>
        </section>
        <section class="info-box-2" v-else v-loading="loading.weatherForcast" />
        <el-row class="title-area">
          <el-col :span="12" class="title">历史用工量</el-col>
          <!-- <el-col :span="12" class="title">用工量分析</el-col> -->
        </el-row>
        <section class="info-box-3" v-if="!loading.pickEmploymentTrend">
          <section class="sub-info-box-1">
            <section class="info-item">
              <section class="name">总用工量</section>
              <!-- <section class="name">预计用工量</section> -->
              <section class="value">{{ pickEmploymentTrend.forecast_cnt }}人</section>
            </section>
            <!-- <section class="info-item">
              <section class="name">已完成用工量</section>
              <section class="value">{{ pickEmploymentTrend.finish_cnt }}人/天</section>
            </section> -->
            <section class="info-item">
              <section class="name">平均每天安排用工量</section>
              <!-- <section class="name">已安排用工量</section> -->
              <section class="value">{{ pickEmploymentTrend.plan_cnt }}人/天</section>
            </section>
          </section>
          <component-line-chart2 :data="pickEmploymentTrend.trend_data" :valueRange="{ min: 0, max: 40 }" />
        </section>
        <section class="info-box-3" v-else v-loading="loading.pickEmploymentTrend" />
        <!-- <el-row class="title-area">
          <el-col :span="12" class="title">专题图层切换</el-col>
        </el-row>
        <component-subject-button-group
          :buttons="types"
          :active="activeType"
          @change="setActiveType"
        /> -->
        <!-- <component-suggestion :methods-type="'getPickAdvice'" /> -->
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapMutations, mapGetters, mapState } from 'vuex'
export default {
  watch: {
    activeType () { },
    currentFarmlandId () {}
  },
  computed: {
    ...mapState('subject-pick', ['types', 'activeType', 'loading', 'pickDate', 'weatherForcast', 'pickDistribute', 'pickEmploymentTrend']),
    ...mapState('base-overview', ['todayWeather']),
    ...mapGetters('common', ['getDictItemNameById'])
  },
  methods: {
    ...mapActions('subject-pick', ['getPickDate', 'getPickDistribute', 'getPickEmploymentTrend']),
    ...mapMutations('subject-pick', ['setActiveType']),
    date (dateValue) {
      const date = new Date(dateValue)
      return {
        month: date.getMonth() + 1,
        day: date.getDate()
      }
    },
    formatDate1 (data, key) {
      if (!data[key]) {
        return '--'
      }
      const { month, day } = this.date(data[key])
      return `${month}月${day}日`
    },
    formatDate2 (data, key) {
      if (!data[key]) {
        return '--'
      }
      const dateArray = data[key].split('年')
      if (dateArray.length > 0) {
        return `${dateArray[1]}`
      }
    },
    formatDate3 (data, key) {
      if (!data[key]) {
        return '-'
      }
      const { month, day } = this.date(data[key])
      return `${month}.${day}`
    },
    formatWeek (data, key) {
      if (!data[key]) {
        return '-'
      }
      const dateArray = data[key].split('周')
      if (dateArray.length > 0) {
        return `${dateArray[1]}`
      }
    }
  },
  created () {
    this.getPickDate()
    this.getPickDistribute()
    this.getPickEmploymentTrend()
  }
}
</script>

<style lang="scss">
@mixin top {
  .icon-button-back {
    position: absolute;
    left: 16px;
    top: 18.5px;
    width: 22.5px;
    height: 22.5px;
    background-image: url("/public/image/common/icon-button-back-02.png");
    background-size: cover;
    cursor: pointer;
  }
  .module-name {
    position: absolute;
    left: 25%;
    right: 25%;
    top: 17px;
    text-align: center;
    font-size: 18px;
    font-family: PingFang SC-Heavy, PingFang SC;
    font-weight: 800;
    color: #ffffff;
  }
  .subject-content {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 719px;
    background: #ffffff;
    box-shadow: 1px 0px 4px 1px rgba(0, 0, 0, 0.25);
    border-radius: 15px;
    padding: 25.5px 15px 16px 20px;
  }
}
.subject-pick {
  width: 308px;
  height: 780px;
    margin-top: -45px;
  transform: scale(0.89);
  .content {
    position: relative;
    height: 100%;
    @include top;
    .title-area {
      height: 23px;
      line-height: 23px;
      margin-bottom: 10px;
      margin-top: 21px;
      &:first-of-type {
        margin-top: 0;
      }
      .title {
        font-size: 16px;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: bold;
        color: #333333;
      }
      .subtitle {
        font-size: 12px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #888c96;
        text-align: right;
      }
    }
    .info-box-1 {
      width: 272.5px;
      height: 56.5px;
      background-image: url("/public/image/subject/bg-info-box-01.png");
      background-size: cover;
      background-position: -2px -6px;
      position: relative;
      .date1 {
        font-size: 16px;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: bold;
        color: #089BAB;
        position: absolute;
        top: 7px;
        left: 13.5px;
        span {
          &:first-of-type {
            &::after {
              content: '-';
              margin-left: 8px;
              margin-right: 8px;
            }
          }
        }
      }
      .date2{
        font-size: 12px;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #9CD7DD;
        position: absolute;
        bottom: 6.5px;
        left: 13.5px;
        span {
          &:first-of-type {
            &::after {
              content: '至';
              margin-left: 6px;
              margin-right: 6px;
            }
          }
        }
      }
    }
    .info-box-2 {
      height: 170px;
      overflow-x: scroll;
      overflow-y: hidden;
      white-space: nowrap;
      .single-weather {
        width: 30px;
        height: 165px;
        margin-right: 12.5px;
        background: rgba(230,245,246,0.8);
        border-radius: 5px 5px 5px 5px;
        display: inline-block;
        vertical-align: top;
        &:last-of-type {
          margin-right: 0;
        }
        .week-day {
          height: 35px;
          font-size: 10px;
          font-family: PingFang SC-Bold, PingFang SC;
          font-weight: bold;
          color: #089BAB;
          text-align: center;
        }
        .date {
          height: 35px;
          font-size: 10px;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #9CD7DD;
          text-align: center;
        }
        .weather-icon {
          height: 40px;
          span {
            transform: scale(0.43);
            transform-origin: left top;
          }
        }
        .max-temperature {
          height: 35px;
          font-size: 10px;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #089BAB;
          text-align: center;
          &::after {
              content: '°C';
          }
        }
        .min-temperature {
          height: 35px;
          font-size: 10px;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #089BAB;
          text-align: center;
          &::after {
              content: '°C';
          }
        }
      }
    }
    .info-box-3 {
      height: 168px;
      .sub-info-box-1 {
        display: flex;
        height: 38px;
        margin-bottom: 10px;
        .info-item {
          flex: 1;
          .name {
            display: block;
            font-size: 12px;
            font-family: PingFang SC-Bold, PingFang SC;
            font-weight: bold;
            color: #8A94A6;
            line-height: 17px;
            margin-bottom: 4px;
            text-align: center;
          }
          .value {
            display: block;
            font-size: 12px;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 500;
            line-height: 17px;
            text-align: center;
            &::before {
              display: inline-block;
              content: '';
              width: 10px;
              height: 10px;
              border-radius: 5px;
              margin-right: 7.5px;
            }
            &::after {
              display: inline-block;
              content: '';
            }
          }
          &:nth-of-type(1) {
            .value {
              color: #9CD7DD;
              &::before {
                background-color: #9CD7DD;
              }
            }
          }
          &:nth-of-type(2) {
            .value {
              color: #089BAB;
              &::before {
                background-color: #089BAB;
              }
            }
          }
          &:nth-of-type(3) {
            .value {
              color: #369AFE;
              &::before {
                background-color: #369AFE;
              }
            }
          }
        }
      }
    }
  }
}
</style>
